// pages/home-music/index.js
import { rankingStore, rankingMap, songsStore, playerStore } from "../../store/index"; // 导入统一的状态管理 

// 导入封装的功能函数
import { 
	debounce, // 导入封装的防抖函数
	queryRect, // 导入封装的获取节点属性函数
	getTouchDirection // 导入封装的判断左滑右滑的函数
} from "../../hooks/index";

// 导入封装的网络接口
// 1、getBanners：获取 home-music 头部轮播图的接口
// 2、getSongMenu：获取歌单接口
import { getBanners, getSongMenu } from "../../service/api_music";

Page({
	data: {
		banners: [], // 轮播图的数据
		swiperHeight: 0, // 轮播图的高度

		hotSongMenu: [], // 热门歌单数据
		recommendSongMenu: [], // 推荐歌单数据
		recommendSongs: {}, // 推荐歌曲数据
		rankings: { 0: {}, 2: {}, 3: {}}, // 存储要渲染的榜单数据

		currentSong: {}, // 当前在播放的歌曲的数据
		isPlaying: false, // 当前歌曲是否在播放
		playAnimationState: "paused", // 歌曲图片的动画状态：running 播放动画；paused 暂停动画

		// 存储手指触摸在屏幕的坐标
		touchData: {
			startX: 0,
			startY: 0
		},
	},

	onLoad() {
		this.getPageData(); // 获取页面数据

		// 发送共享数据的请求
		rankingStore.dispatch("getRankingDataAction"); // 发送获取热门歌曲的请求
		songsStore.dispatch("getSongsDataAction"); // 发送获取歌单分类的请求

		// 从 store 中获取共享的数据
		this.setupStoreListener(); // 调用数据监听的函数
	},

	onUnload() {
		// 页面销毁的时候取消监听
		// rankingStore.offState("newRanking", this.getRankingHandler);
	},

	// 网络请求整合
	getPageData() {
		// 获取轮播图数据
		getBanners().then(res => {
			this.setData({ banners: res.banners });
		});

		// 获取歌单数据（热门歌单）
		getSongMenu().then(res => {
			this.setData({ hotSongMenu: res.playlists });
		});

		// 获取歌单数据（推荐歌单）
		getSongMenu("华语").then(res => {
			this.setData({ recommendSongMenu: res.playlists });
		});
	},

	// 监听状态管理中的数据的函数
	setupStoreListener() {
		// 1、榜单数据的监听
		rankingStore.onState("hotRanking", res => {
			// 如果热门榜单数据有值
			if(res.tracks) {
				// home-music 只需要渲染前 6 条推荐歌曲的数据
				const recommendSongs = res.tracks.slice(0, 6);
				this.setData({ recommendSongs });
			}
		});

		// 新歌榜的数据
		rankingStore.onState("newRanking", this.getRankingHandler(0));
		// 原创榜的数据
		rankingStore.onState("originRanking", this.getRankingHandler(2));
		// 飙升榜的数据
		rankingStore.onState("upRanking", this.getRankingHandler(3));

		// 2、播放歌曲的数据监听
		playerStore.onStates(["currentSong", "isPlaying"], ({ currentSong, isPlaying }) => {
			// 如果有播放的歌曲
			if(currentSong) {
				this.setData({ currentSong });
			}
			// 如果播放状态存在
			if(isPlaying !== undefined) {
				this.setData({ 
					isPlaying, 
					playAnimationState: isPlaying ? "running" : "paused" 
				});
			}
		});
	},

	// 点击搜索框时触发的事件
	handleSearchClick() {
		// 路由跳转，跳转到搜索详情页面
		wx.navigateTo({
			url: '/packageDetail/pages/detail-search/index',
		});
	},

	// 轮播图图片加载完成的事件
	handleSwiperImageLoaded: debounce(function() {
		queryRect("#swiper-image").then(res => {
      const imageInfo = res[0]; // 获取图片的一些信息
      this.setData({ swiperHeight: imageInfo.height  + "px" });
		});
	}, 200),

	// 处理榜单数据的函数
	getRankingHandler(idx) {
		return res => {
			// 1. 如果请求的数据为空，就直接返回，不执行下面的代码
			if(Object.keys(res).length === 0) return;

			// 2. 数据处理
			const name = res.name; // 榜单名字
			const playCount = res.playCount; // 榜单播放量
			const coverImgUrl = res.coverImgUrl; // 榜单封面
			const songList = res.tracks.slice(0, 3); // 获取前三条榜单数据

			// 3. 数据整合
			const rankingObj = { name, playCount, coverImgUrl, songList };
			// 拷贝原来的数据
			const newRankings = { ...this.data.rankings, [idx]: rankingObj };

			// 4. 更新数据
			this.setData({ rankings: newRankings });
		}
	},

	// 点击推荐歌曲更多按钮触发的事件 
	handleMoreClick() {
		// 调用跳转 detail-songs 页面的方法
		this.navigateToDetailSongPage("hotRanking");
	},

	// 点击歌曲 item 触发的事件
	handleSongItemClick(event) {
		const index = event.currentTarget.dataset.index; // 获取当前歌曲的索引
		// 设置歌曲列表
		playerStore.setState("playSongsList", this.data.recommendSongs);
		// 设置当前播放的歌曲的索引
		playerStore.setState("playSongsIndex", index);
	},

	// 点击巅峰榜中每个歌单的处理事件
	handleRankingClick(event) {
		const idx = event.currentTarget.dataset.idx; // 获取到 idx
		const rankingName = rankingMap[idx]; // 通过 idx 获取榜单名
		
		// 调用跳转 detail-songs 页面的方法
		this.navigateToDetailSongPage(rankingName);
	},

	// 处理跳转到 detail-songs 页面的公共事件
	navigateToDetailSongPage(rankingName) {
		// 跳转到榜单详情页
		wx.navigateTo({
			url: `/packageDetail/pages/detail-songs/index?ranking=${rankingName}&type=rank`,
		});
	},

	// 点击热门歌单的更多的事件处理函数
	handleHotSongs() {
		wx.navigateTo({
			url: '/packageDetail/pages/hot-songs/index',
		});
	},

	// 点击底部播放栏，跳转到歌曲播放页面
	handlePlayBarClick() {
		wx.navigateTo({
			url: '/packagePlayer/pages/music-play/index',
		});
	},

	// 点击播放栏中的暂停/播放按钮
	handlePlayClick() {
		playerStore.dispatch("changeMusicPlayStateAction", !this.data.isPlaying);
	},

	// 下面是处理播放栏进行左右滑动切换歌曲的事件
	// 播放栏手指触摸的事件
	handleTouchStart(event) {
		this.setData({
			"touchData.startX": event.changedTouches[0].clientX, // 触摸时的 x 轴
			"touchData.startY": event.changedTouches[0].clientY // 触摸时的 y 轴
		});
	},

	// 播放栏手指出没完成的事件
	handleTouchEnd(e) {
		const endX = e.changedTouches[0].clientX; // 触摸结束的 x 轴
		const endY = e.changedTouches[0].clientY; // 触摸结束的 y 轴

		// 滑动的方向
		const direction = getTouchDirection(this.data.touchData, endX, endY);
		if(direction === "left") {
			// 左滑，下一首
			playerStore.dispatch("changeNewMusicAction");
		} else if(direction === "right") {
			// 右滑，上一首
			playerStore.dispatch("changeNewMusicAction", false);
		}
	}
});
